<template>
    <div class="statistics">
      <div class="head">
        <div class="input-item">
            <span class="item-tip">报工时间:</span>
            <el-input placeholder="请输入内容" size="mini" class="item-input"></el-input>
        </div>
        <div class="input-item">
            <span class="item-tip">产品名称:</span>
            <el-input placeholder="请输入内容" size="mini" class="item-input"></el-input>
        </div>
        <div class="input-item">
            <span class="item-tip">订单编号:</span>
            <el-input placeholder="请输入内容" size="mini" class="item-input"></el-input>
        </div>
      </div>
      <div class="main">
        <div class="main-left" id="chart"></div>
        <div class="main-right">
            <el-table :data="tableData" style="">
                <el-table-column prop="" label="序号" width=""></el-table-column>
                <el-table-column prop="" label="缺陷名称" width=""></el-table-column>
                <el-table-column prop="" label="不良数量" width=""></el-table-column>
                <el-table-column prop="" label="不良率" width=""></el-table-column>
            </el-table>
        </div>
      </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    data(){
        let myChart = null;
        return {
            myChart
        }
    },
    mounted() {
        this.drawChart();
        const _this = this;
        window.addEventListener('resize',function(){
            _this.myChart.resize();
        });
    },
    beforeDestroy() {
        const _this = this;
        window.removeEventListener('resize',function() {
            _this.myChart.resize();
        })
    },
    methods:{
        //绘制缺陷数据图表
        drawChart(){
            if(!this.myChart){
                this.myChart = echarts.init(document.getElementById("chart"));
            }
            const option = {
                legend: {
                    width:'auto',
                    icon:'rect',
                    data: ['缺陷']
                    // ...
                },
                xAxis: {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true,
                        show:false
                    },
                    data: ['钻偏', '内短', '压合起皱', '洒墨', '孔内毛刺', '做错层次', '做错版本','喷锡起泡','混料','测试针印','板材色差','锡粗糙','锣爆油','粘网板']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name:"缺陷",
                        data: [1920, 4770, 7200, 1080, 2520, 26363, 62100, 138825, 34461, 22832, 56678, 38340, 87452, 41773],
                        type: 'bar',
                        label:{
                            show:true,
                            position:'top'
                        }
                    }
                ]
            };
            this.myChart.setOption(option);
        },
    }
    
}
</script>

<style lang='scss' scoped>
.statistics{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    user-select: none;
    .head{
        width: 100%;
        padding: 10px;
        flex: 1;
        display: flex;
        justify-content: space-between;
        .input-item{
            display: flex;
            align-items: center;
            .item-tip{
                display: inline-block;
                width: 6vw;
                font-size: 1.1vw;
            }
            .item-input{
                width: 20vw;
            }
        }
    }
    .main{
        flex: 9;
        display: flex;
        .main-left{
            flex:7;
        }
        .main-right{
            flex: 2;
        }
    }
}
</style>